  <template>
  <div class="choose-type">
    <div class="title">请选择能力注册方式：</div>
    <div class="body">
      <div class="item" v-for="n in releaseArr" :key="n.id">
        <div class="img" :class="{'bg-gray': n.disable}" @click.stop="onClick(n)">
            <el-icon  class="left el-icon-s-platform">
                <Platform />
            </el-icon >
            <div class="right">{{ n.title }}</div>
            <div v-if="n.disable" class="wait">敬请期待</div>
        </div>
        <p class="text">{{ n.tip }}</p>
      </div>
    </div>
    <div class="footer">
        <el-button @click="onClose">取消</el-button>
    </div>
  </div>
</template>

<script>
// import { mapActions, mapMutations } from 'vuex'
import {serviceStore} from '@slc/store/service';
import {mapActions, mapState} from 'pinia';
import { releaseArr } from '../config/add'
export default {
  data() {
    return {
      releaseArr
    }
  },
  methods: {
    ...mapActions(serviceStore, [
      'setVisible',
      'setServerReleaseType',
      'setCurStep',
      'setMaxStep',
      'chooseReleaseType'
    ]),
    // ...mapActions('service', [
    //   'chooseReleaseType'
    // ]),
    onClick(n) {
      if (n.disable) {
        return
      }
      this.setServerReleaseType(n.key)
      this.chooseReleaseType(n.key)
    },
    onClose() {
      this.setVisible(false)
    }
  },
}
</script>

<style lang="scss" scoped>
.choose-type {
  .title {
    padding: 0 36px;
    color: #000;
  }
  .body {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    height: 400px;
    margin-top: 16px;
    padding: 0 36px;
    .item {
      flex: 1;
      .img {
        position: relative;
        display: flex;
        align-items: center;
        border: 1px solid #ccc;
        border-radius: 4px;
        height: 120px;
        cursor: pointer;
        .left {
            margin: 0 10px;
            font-size: 40px;
            color: #409EFF;
        }
        .right {
            color: #000;
        }
        .wait {
          position: absolute;
          bottom: 0;
          right: 0;
          color: #fff;
          font-size: 12px;
          z-index: 1;
        }
      }
      .bg-gray {
        background-color: #ccc;
      }
      .text {
        text-indent: 32px;
        color: #999;
      }
    }
  }
  .footer {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
